<template>
  <div id="app">
    <el-container class="home-container">
      <!--头部  -->
      <el-header height="80px">
        <h1 style="color: #495E57;">当伊芙来敲门——后量子密码算法的侧信道辅助的选择密文攻击与防御</h1>
      </el-header>
      <!-- 页面主体区  嵌套容器  包裹 Aside与Main -->
      <el-container>
        <!-- 左侧 -->
        <el-aside width="200px">
          <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" :router="true" background-color="#495E57"
            text-color="#fff" active-text-color="#F4CE14">
            <el-menu-item index="0">
              <i class="el-icon-info"></i>
              <span slot="title">作品介绍</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">不等式生成</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-data"></i>
              <span slot="title">不等式求解</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeMenu: ''
      };
    },
    created() {
      this.updateActiveMenu();
    },
    watch: {
      '$route.path': function (newPath) {
        this.updateActiveMenu();
      }
    },
    mounted() {
      document.title = "当伊芙来敲门";
    },
    methods: {

      updateActiveMenu() {
        console.log(this.$route.path)
        this.activeMenu = this.$route.path[1];
      }
    }
  };
</script>

<style>
  .home-container {
    height: 100%;
  }

  .el-header {
    background-color: #F4CE14;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .el-aside {
    background-color: #495E57;
    color: #333;

  }

  .el-main {
    background-color: #F5F7F8;
    color: #333;
  }


</style>